<template>
  <el-dialog
    :visible.sync="visible"
    :close-on-click-modal="false"
    append-to-body
    :before-close="beforeClose"
    top="30px"
    width="1000px"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="担保意向函" name="first">
        <div v-if="!hasBank" class="p-5 text-center text-muted border rounded bg-light">
          暂无银行认领，请等待银行认领
        </div>
        <letter-file
          v-else
          @success="handleEditSuccess"
          :isView="isOrgBank"
          :related-data="relatedData"
        ></letter-file>
      </el-tab-pane>
      <el-tab-pane label="担保意向函回执联" v-if="isOrgBank">
        <!-- 只有银行可以添加 -->
        <div
          v-if="!isOrgBank && +yxhStatus === 1"
          class="p-5 text-center text-muted border rounded bg-light"
        >
          暂无担保意向函回执联，请等待银行回复
        </div>
        <accept-letter
          :related-data="relatedData"
          @success="handleEditSuccess"
          v-else
          :isView="!isOrgBank"
        ></accept-letter>
      </el-tab-pane>
      <el-tab-pane label="联保函" v-if="!isSelfProject">
        <union-letter @success="handleEditSuccess" :related-data="relatedData"></union-letter>
      </el-tab-pane>
      <!-- <el-tab-pane label="联保函回执联"
                   v-if="+lbhStatus > 0">
        <reply-union-letter @success="handleEditSuccess"
                            v-if="isUserTown && +lbhStatus === 1"
                            :isView="!isUserTown"
                            :related-data="relatedData"></reply-union-letter>
        <div v-else
             class="p-5 text-center text-muted border rounded bg-light">
          请先通过项目复审
        </div>
      </el-tab-pane> -->
    </el-tabs>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import LetterFile from '@/credit/views/county/mission/components/LetterFile'
import AcceptLetter from '@/credit/views/county/mission/components/AcceptLetter'
import UnionLetter from '@/credit/views/county/mission/components/UnionLetter'
// import ReplyUnionLetter from '@/credit/views/county/mission/components/ReplyUnionLetter'

export default {
  components: {
    AcceptLetter,
    LetterFile,
    UnionLetter,
    // ReplyUnionLetter
  },
  data() {
    return {
      activeName: 'first',
    }
  },
  props: {
    visible: Boolean,
    relatedData: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    ...mapGetters(['user', 'org']),
    isOrgBank() {
      return this.org.orgClass === 'org_bank'
    },
    isUserTown() {
      return this.user.orgRegionLever === 3
    },
    yxhStatus() {
      return this.relatedData.ele_letter_status
    },
    lbhStatus() {
      return this.relatedData.gua_letter_status
    },
    isRed() {
      return this.isUserTown || this.isOrgBank
    },
    isSelfProject() {
      return +this.relatedData.gua_type === 2
    },
    hasBank() {
      return !!this.relatedData.bank_id
    },
  },
  watch: {
    relatedData: {
      handler: function () {
        this.activeName = 'first'
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },

    handleEditSuccess() {
      this.beforeClose()
      this.$emit('success', true)
    },
  },
}
</script>
<style lang="scss" scoped></style>
